<template>
	<view class="pagesbg">
		<view class="userBg">
			<!-- 状态栏高度 -->
			<view class="status_bar" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view :class="['userBox',isShow?'':'userBox1']">
				<view class="userBox-left">
					<view class="imgBox">
						<image :src="JSON.stringify(userInfo) != '{}' ? imgShow(userInfo.avatar) : ' ../../static/pack/logo.png'" mode="aspectFill"></image>
					</view>
					<view class="content" v-if="JSON.stringify(userInfo) != '{}'">
						<view class="top">
							<view class="name">{{ userInfo.nickName }}</view>
							<view class="level1">
								<!-- <image class="ico" src="@/static/user/level.png" mode=""></image> -->
								<text class="sp">{{ getGameLevel(userInfo.gameLevel) }}</text>
							</view>
							<view class="level1" v-if="userInfo.level2>0">
								<text class="sp">{{ getLevel2(userInfo.level2) }}</text>
							</view>
							<view class="level1"  v-if="userInfo.bonusLine>0">
								<text class="sp">{{ userInfo.bonusLine }}分红</text>
							</view>
						</view>
						<view class="phone">{{ userInfo.regAddress | conceal(4) }}</view>
					</view>
					<view class="content" v-else @tap.stop="$tools.jump('/pages/operate/login')">
						<view class="top">
							<view class="name">请先登录</view>
						</view>
					</view>
				</view>
			</view>
		<div class="user-banlace">
			<div class="l">
				<div class="txt">QFB积分</div>
				<div class="num">{{userMoney.validNum2 || 0}}</div>
			</div>
			<div class="btn"  @tap.stop="$tools.jump('/pages/balance/balanceRecord1',2,'QFB')">查看</div>
		</div>
		<!-- 我的收益 -->
		<view class="user-asset">
			<view class="list">
				<view class="item">
					<view class="txt"><image class="ico" src="@/static/user/icon-wallet.png" mode="widthFix" />累计收益</view>
					<view class="num">{{earnings.sylj || 0}}</view>
				</view>
				<view class="item" @tap.stop="$tools.jump('/pages/balance/balanceRecord',1,'积分券')">
					<view class="txt"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />积分券</view>
					<view class="num">{{userMoney.validNum1 || 0}}</view>
				</view>
			</view>
		</view>
	</view>
		<view class="grid grid-bg">
			<view class="grid-operate">
				<view class="grid-title">我的订单</view>
				<view class="grid-right" @tap.stop="$tools.jump('/pages/order/order','')">
					<text>全部</text>
					<image src="@/static/user/next.png" mode=""></image>
				</view>
			</view>
			<u-grid :border="false" col="4"  class="grid-list">
				<u-grid-item class="grid-item" v-for="(item, index) in list" :key="index" 
				@tap="goOrder(item,index)">
					<text class="grid-tips" :class="{'grid-tips--style' :  orderCount.one >= 10}"
					v-if="index == 0 && orderCount.zero > 0">
						{{ orderCount.zero }}
					</text>
					<text class="grid-tips" :class="{'grid-tips--style' :  orderCount.one >= 10}"
					v-if="index == 1 && orderCount.one > 0">
						{{ orderCount.one }}
					</text>
					<text class="grid-tips" :class="{'grid-tips--style' :  orderCount.two >= 10}"
					v-if="index == 2 && orderCount.two > 0">
						{{ orderCount.two }}
					</text>
					<image class="grid-img" :src="'../../static/user/icon-'+(index)+'.png'" mode=""></image>
					<text class="grid-text">{{item.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="userList">
			<view class="grid-title">我的服务</view>
			<view class="userList-list">
				<view class="userList-list__item" v-for="(item,index) in list1" :key="index"
				@tap.stop="goUrl(item,index)">
					<view class="leftBox">
						<image :src="'../../static/user/icon-'+(item.ico)+'.png'" mode=""></image>
						<view class="name">{{ item.name }}</view>
					</view>
					<!-- <view class="rightBox">
						<image src="@/static/user/sel.png" mode=""></image>
					</view> -->
				</view>
			</view>
			
		</view>
		<!-- 底部导航 -->
	<!-- <initTabbar :current-page="4" />	 -->
		<!-- 联系客服弹窗 -->
		<uni-popup ref="kefuPopup" type="center" :animation="true" @change="changePopup($event,'kefuPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="kefuPopup">
						<view class="kefuPopup-group">
							<view class="txt">
								<image class="ico" src="@/static/public/qq.png" mode="widthFix"></image>
								<text class="text">客服qq号</text>
								<image class="copy" @tap.stop="$tools.copy(serviceParam.customer_service_qq)" src="@/static/public/copy.png" mode="widthFix"></image>
							</view>
							<view class="p">{{ serviceParam.customer_service_qq }}</view>
						</view>
						<view class="kefuPopup-group">
							<view class="txt">
								<image class="ico" src="@/static/public/weixin.png" mode="widthFix"></image>
								<text class="text">客服微信号</text>
								<image class="copy" @tap.stop="$tools.copy(serviceParam.customer_service_WeChat)" src="@/static/public/copy.png" mode="widthFix"></image>
							</view>
							<view class="p">{{ serviceParam.customer_service_WeChat }}</view>
						</view>
						<view class="bottom">
							<view class="btn" @tap.stop="hidePopup('kefuPopup')">关闭</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				list: [
					{name: '支付中',route:'/pages/order/order',status:0,icon:''},
					{name: '待发货',route:'/pages/order/order',status:1,icon:''},
					{name: '待收货',route:'/pages/order/order',status:2,icon:''},
					{name: '已完成',route:'/pages/order/order',status:3,icon:''},
					// {name: '待评价',route:''},
					// {name: '售后/退款',route:''},
				],
				list1: [
					{name: '消费券',route:'/pages/balance/balanceRecord1',ico:'08',type:3},
					{name: '我的团队',route:'/pages/team/team',ico:'00'},
					{name: '邀请好友',route:'/pages/share/share',ico:'01'},
					{name: '收货地址',route:'/pages/address/address',ico:'02'},
					{name: '联系客服',route:'/pages/setup/editPsd',ico:'09'},
					{name: '登录密码',route:'/pages/setup/editPsd',ico:'03'},
					{name: '支付密码',route:'/pages/setup/editPayPsd',ico:'06'},
					{name: '设置',route:'/pages/setup/setup',ico:'07'},
				],
				userInfo: {},
				userMoney: {},
				orderCount: {},
				earnings:{},
				seeShow: 2,
				isShow:true,
				isRead:0, // 是否已看,0-未看，2-已看
				videoSrc:'',
				totalDuration: 0, // 视频总时长（秒）
				currentTime: 0, // 当前播放时长（秒）
				remainingTime: 0, // 格式化后的剩余时间
				showClose:false,
				totalPoint:0,
				serviceParam:{}, // 服务参数
				statusBarHeight:0,
				platform:'',
			}
		},
		computed: {
			getGameLevel(){
				return function(type){
					switch (type){
						case 0:
							return '普通用户';
							break;
						case 1:
							return '一星';
							break;
						case 2:
							return '二星';
							break;
						case 3:
							return '三星';
							break;
						case 4:
							return '四星';
							break;
					}
				}
			},
			getLevel2(){
				return function(type){
					switch (type){
						case 0:
							return '普通用户';
							break;
						case 1:
							return '策略委';
							break;
						case 2:
							return '中策委';
							break;
						case 3:
							return '发展委';
							break;
					}
				}
			}
		},
		onLoad() {
			const that = this
			//获取手机型号
			uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
		},
		onShow() {
			this.init();
			// this.getVideoProfitSize()
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				this.getUserInfo();
				this.getUserMoney();
				this.getOrderCount();
				this.getMyEarnings();
				this.getServiceParam()
			},
			// 查询用户实时最新信息
			getUserInfo(){
				var data = null;
				this.$Ajax('/api/user/getUserInfo',
				data,
				res => {
						if (res.code == 200) {
							this.userInfo = res.data;
							console.log("this.userInfo:",this.userInfo);
						}
					}
				)
			},
			goOrder(item,index){
				this.$tools.jump('/pages/order/order',item.status)
			},
			goUrl(item,index){
				if(item.name=='消费券'){
					this.$tools.jump(item.route,item.type,item.name)
				}else if(item.name=='联系客服'){
					this.openPopup('kefuPopup')
				}
				else{
					this.$tools.jump(item.route,item.name)
				}
			},
			getMyEarnings(){
				var data = {};
				this.$Ajax('/api/money/profitTotal',
				data,
				res => {
						if (res.code == 200) {
							this.earnings = res.data;
						}
					}, err => {
					}, 'GET'
				)
			},
			getOrderCount() {
				var data = {};
				this.$Ajax('/api/order/orderCount',data,res => {
						if (res.code == 200) {
							this.orderCount = res.data.data;
						}
					}, err =>{
					}, 'GET'
				)
			},
			getServiceParam(){
				var data = {};
				this.$Ajax('/api/common/getServiceParam',
				data,
				res => {
						if (res.code == 200) {
							this.serviceParam = res.data;
						}
					}, err => {
					}, 'GET'
				)
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagesbg{
		background: #F9F9F9;
		height: auto;
		min-height: auto;
		// padding-bottom: 40rpx;
	}
	.userBg{
		background: url('@/static/user/user-top.png');
		background-repeat: repeat;
		// background: #F5F6E5;
		background-size: 100% 100%;
		padding-top: 30rpx;
	}
	
	.userBox{
		// @include flexBetween;
		// padding: 0 30rpx 0 50rpx;
		width: 100%;
		color: #fff;
		&-left{
			@include flexLeft;
			padding: 24rpx;
			.imgBox{
				background: #F9F9F9;
				border-radius: 100%;
				width: 120rpx;
				height: 120rpx;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
					// width: 100%;
					// height: 100%;
					// border-radius: 50%;
				}
			}
			.content{
				@include flexLeftColumn;
				margin-left: 30rpx;
				width: 100%;
				.top{
					@include flexLeft;
					.name{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
						margin-right: 20rpx;
					}
					.level{
						// @include flexCenter;
						// background: #F4010A;
						// background: url(../../static/user/user-titleBg.png) no-repeat;
						// background-size: 100% 100%;
						// width: 194rpx;
						// height: 52rpx;
						// line-height: 52rpx;
						// padding-left:  54rpx;
						// padding-right:  20rpx;
						color: #fff;
						font-size: 24rpx;
						margin-left: 14rpx;
						@include flexLeft;
						.ico{
							width: 48rpx;
							height: 48rpx;
							position: absolute;
						}
						.sp{
							// height: 40rpx;
							padding: 8rpx 20rpx;
							padding-left: 58rpx;
							background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
							border-radius: 74rpx;
						}
					}
					.level1{
						color: #fff;
						font-size: 24rpx;
						padding: 8rpx 20rpx;
						background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
						border-radius: 74rpx;
						margin-left: 10rpx;
					}
				}
				.phone{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333;
					margin-top: 22rpx;
				}
			}
		}
		&-right{
			@include flexRight;
			image{
				width: 90rpx;
				height: 90rpx;
			}
		}
	}
	.user-banlace{
		background: url('@/static/user/user-topBg.png');
		background-repeat: repeat;
		// background: #F5F6E5;
		background-size: 100% 100%;
		width: 93.6%;
		margin: auto;
		margin-top: 24rpx;
		padding: 40rpx 26rpx;
		color: #fff;
		height: 152rpx;
		@include flexBetween;
		.txt{
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.num{
			margin-top: 10rpx;
			font-family: D-DIN, D-DIN;
			font-weight: 700;
			font-size: 48rpx;
			color: #FFFFFF;
			line-height: 52rpx;
		}
		.btn{
			width: 106rpx;
			text-align: center;
			height: 48rpx;
			line-height: 48rpx;
			background: #FFFFFF;
			border-radius: 80rpx ;
			font-weight: 500;
			font-size: 24rpx;
			color: #F96447;
		}
	}
	// 我的收益
	.user-asset{
		overflow: hidden;
		border-radius: 20rpx;
		width: 93.6%;
		margin: auto;
		margin-top: 24rpx;
		background: #FFFFFF;
		padding: 32rpx 28rpx;
		.title{
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			line-height: 38rpx;
		}
		.list{
			@include flexCenter;
			margin-top: 20rpx;
		}
		.item{
			width: 50%;
			text-align: center;
			position: relative;
			.num{
				margin-top: 10rpx;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #000;
				// background: #EE3A33;
				// -webkit-background-clip: text;
			  // -webkit-text-fill-color: transparent;
			}
			.txt{
				@include flexCenter;
				font-size: 24rpx;
				color: #000;
				font-weight: bold;
				line-height: 28rpx;
			}
			.ico{
				width: 76rpx;
			}
		}
		.item:nth-of-type(2)::before{
			content: '';
			position: absolute;
			top: 30rpx;
			left: 0;
			background: #E8E8E8;
			width: 2rpx;
			height:75rpx ;
		}
	}
	.banner{
		width: 93.6%;
		margin: auto;
		margin-top: 22rpx;
	}
	// 订单
	.grid{
		border-radius: 20rpx;
		// margin: 22rpx 30rpx 0rpx;
		width: 93.6%;
		margin: auto;
		margin-top: 20rpx;
		&-bg{
			background: #FFFFFF;
			padding: 30rpx 0rpx 28rpx;
		}
		&-list{
			position: relative;
			z-index: 2;
			border-radius: 16rpx;
			@include flexBetween;
			align-items: flex-start;
		}
		&-operate{
			@include flexBetween;
			width: 100%;
			margin-bottom: 48rpx;
			padding: 0 30rpx;
		}
		&-title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #000;
			white-space: nowrap;
		}
		&-right{
			@include flexRight;
			text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
			image{
				width: 9.94rpx;
				height: 19.87rpx;
				margin-left: 12rpx;
			}
		}
		&-item{
			position: relative;
		}
		&-tips{
			background: #EE3A33;
			border-radius: 100%;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding: 4rpx 10rpx;
			position: absolute;
			right: 40rpx;
			top: 0rpx;
			z-index: 9;
			&--style{
				padding: 6rpx;
			}
		}
		&-img{
			width: 74rpx;
			height: 74rpx;
		}
		&-text{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
			text-align: center;
			margin: 6rpx 0 0;
		}
	}
	
	.userList{
		border-radius: 20rpx;
		margin: 22rpx 30rpx 0rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding:20rpx 28rpx ;
		&-list{
			@include flexLeft;
			flex-wrap: wrap;
			&__item{
				width:25%;
				@include flexCenter;
				text-align: center;
				margin-top: 32rpx;
				.leftBox{
					image{
						width: 84rpx;
						height: 84rpx;
					}
					.name{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333;
						margin-top: 10rpx;
					}
				}
				.rightBox{
					width: 36rpx;
					height: 36rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	// 联系客服弹窗
.kefuPopup{
	width: 640rpx;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	&-group{
		margin-top: 64rpx;
		.txt{
			@include flexCenter;
		}
		.ico{
			width: 48rpx;
		}
		.copy{
			width: 32rpx;
		}
		.text{
			font-weight: 600;
			font-size: 32rpx;
			color: rgba(51,51,51,0.9);
			line-height: 48rpx;
			margin: 0 16rpx;
		}
		.p{
			margin-top: 16rpx;
			font-size: 32rpx;
			color: rgba(51,51,51,0.6);
			line-height: 48rpx;
			text-align: center;
		}
	}
	.btn{
		margin-top: 16rpx;
		width: 100%;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #B1231C;
    border-top: 1px solid #E7E7E7;
	}
}	
</style>